import Message from '@/components/Message.vue'
import { h,render} from 'vue'
export type MessageType = 'success'|'error'|'default'
//如何使用一个函数创建一个组件
const createMessage = (message:string,type:MessageType,timeout = 2000) =>{
    //获取message节点
    let messageContainer = document.getElementById('message')
    //如果没有message节点，则需要创建节点并添加它
    if(!messageContainer){
        messageContainer = document.createElement('div')
        messageContainer.id = 'message'
        document.body.appendChild(messageContainer)
    }
    //创建Vue实例并传递参数
    const messageVnode = h(Message,{
        message,
        type
    })
    //将Vue实例挂载到message元素上
    render(messageVnode,messageContainer)
    //过了2秒之后，进行卸载实例，并且移除创建的dom节点
    setTimeout(()=>{
        if(messageContainer){
            render(null,messageContainer)
        }
        if (messageContainer && document.body.contains(messageContainer)) {
            document.body.removeChild(messageContainer);
          }
    },timeout)
}

export default createMessage